<template>
 <!-- 设备管理页面 -->
  <div class="fillcontain">
    <!-- 添加 -->
      <div class="searchArea">   
         <el-button  
           :disabled="role.includes('操作员')" 
           type="primary" 
           size="small" 
           icon="el-icon-plus"
           class="mb-2"
           @click="addDevice">添加设备
         </el-button>
      </div>
     <!-- 设备表格 -->
      <div class="table_container">
        <el-table
          border
          size="small"
          v-loading="loading"
          element-loading-text = "数据正在加载中..."
          element-loading-spinner = "el-icon-loading"
          :data="deviceList"
          style="width: 100%"
          align="center"
          @cell-click="goDeviceParams">
          <el-table-column
            prop="machine_no"
            label="设备号"
            align="center"
            sortable>
          </el-table-column>
          <el-table-column 
            label="设备名称" 
            align="center">
            <template slot-scope="scope">
              <a>{{scope.row.name}}</a>
            </template>
          </el-table-column>
          <el-table-column 
            prop="station_name" 
            label="工位" 
            align="center">
          </el-table-column>
          <el-table-column 
            prop="machine_kind" 
            label="设备类型" 
            align="center">
          </el-table-column>
          <el-table-column 
            prop="factory_no" 
            label="厂区" 
            align="center">
          </el-table-column>
          <el-table-column 
            prop="workshop_no" 
            label="厂房" 
            align="center">
          </el-table-column>
          <el-table-column
            label="设备状态"
            align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.enable"
                active-color="#13ce66"
                :active-text="scope.row.enable===true?'启用':'禁用'"
                @change="changeEnable(scope.row.facility_id,$event)" >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="操作"
            width="300">
            <template slot-scope="scope">
              <el-button 
                type="info" 
                plain 
                size="mini" 
                @click="toDeviceRepair(scope.row)"
                >维修</el-button>
              <el-button 
                type="success" 
                size="mini" 
                @click="onDeviceService(scope.row)"
                >保养</el-button>
              <el-button 
                type="warning"  
                size="mini" 
                @click="onEditDevice(scope.row)"
                >修改</el-button>
              <el-button 
                :disabled="role.includes('操作员')" 
                type="danger"  
                size="mini" 
                @click="removeDeviceByID(scope.row.facility_id)"
                >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页功能 -->
        <pagination
          :paginations="paginations"
          @handleCurrentChange="handleCurrentChange"
          @handleSizeChange="handleSizeChange"
        ></pagination>
      </div> 
      <!-- 添加设备对话框 -->
      <device-dialog 
        v-if="deviceDialog.show" 
        :isShow="deviceDialog.show" 
        :title="deviceDialog.title"
        :dialogRow="deviceDialog.dialogRow"
        @closeDialog="deviceDialog.show=false"
        @getDeviceList="getDeviceData" >
      </device-dialog>
       <!-- 保养设备对话框 -->
      <service-dialog 
        v-if="serviceDialog.show" 
        :isShow="serviceDialog.show" 
        :dialogRow="serviceDialog.dialogRow"
        @closeDialog="serviceDialog.show=false">
      </service-dialog>
  </div>
</template>

<script>
import{DeviceList,removeDevice,updateDeviceInfo} from "@/api/device.js";
import Pagination from "@/components/pagination";
import DeviceDialog from "./childComps/DeviceDialog"
import ServiceDialog from "./childComps/ServiceDialog.vue"

export default {
  name: "Registered",
  components: {
    Pagination,
    DeviceDialog,
    ServiceDialog
  },
  data() {  
    return {
      isShow: false, 
      loading: true,
      deviceList: [],    
      paginations: {
        index: 1, // 当前位于哪页
        size: 10, // 1页显示多少条
        pageSizes: [8, 10, 15,20], //每页显示多少条
        pageTotal: 0, //总记录条数
      },
      deviceDialog: {
        show: false,
        dialogRow: {},
        title:''
      },
      serviceDialog: {
        show: false,
        dialogRow: {},
      },
    };
  },
  created(){
    //获取设备列表数据
    this.getDeviceData()
  },
  computed:{
  role(){
    return this.$store.getters.roles
  }
 },
  methods: {
    //获取设备列表数据
   async getDeviceData(){
     let page = {
        index: this.paginations.index,
        size: this.paginations.size,
      };
      const data =await DeviceList(page)
        this.deviceList = data.data;
        this.paginations.pageTotal=data.count
        this.loading = false;
    },
    //点击添加设备按钮，显示对话框
    addDevice(){
      this.deviceDialog.title="添加设备"
      this.deviceDialog.show=true
    },
     //编辑设备按钮
    async onEditDevice(row) {
      this.deviceDialog.dialogRow=row
      this.deviceDialog.title="修改设备"
      this.deviceDialog.show=true
    },
     //删除设备
    removeDeviceByID(facility_id) {
       this.$confirm("此操作将删除该设备, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
          await removeDevice(facility_id);
          this.$message.success('删除设备成功！')
          this.getDeviceData(); //刷新列表
      })
    },
     //设备维修
    toDeviceRepair(row){
      this.$router.push({path:'/dev/repair',query:{row:JSON.stringify(row)}})
     },
   //设备保养
     onDeviceService(row){
      this.serviceDialog.dialogRow=row
      this.serviceDialog.show=true
     },
    //设备启用或禁用 
   async changeEnable(facility_id,enable){
     let params={
      facility_id,
      enable:enable===true?1:0 //1启用 0禁用
     }
     await updateDeviceInfo(params)
     this.$message.success('设置成功！')
    },
    //点击查看设备详情
    goDeviceParams(row, column, cell, event){
      if(column.label==='设备名称'){
         this.$router.push({path:'/dev/params',query:{row:JSON.stringify(row)}})
      }
    },
    //上下分页
    handleCurrentChange(newPage) {
       this.paginations.index=newPage
       this.getDeviceData()
    },
    //每页显示多少条
    handleSizeChange(newCount) {
      this.paginations.size=newCount
      this.getDeviceData()
    },
  },
};
</script>

<style lang="scss" scoped>
a,
a:focus,
a:hover {
    cursor: pointer;
    text-decoration: underline;
    color: #409EFF;
}
</style>
